import React, { useState } from 'react'
import { UploadOutlined } from '@ant-design/icons';
import { Button, Upload, Card, Input, message } from 'antd';
import request from '../../utility/request'
import { uuidFormat } from '../../utility/uuidFormat'
import { MD5 } from '../../utility/md5'
import { chatQingyun } from '../../api/chatQingyun'

export default function ManyTranslate() {
  const [chatVal, setChatVal] = useState([])
  const [val, setVal] = useState("")

  const pro = {
    name: 'file',
    // action: "https://www.niupic.com/api/upload",
    maxCount: 1,
    onChange(info) {
      if (info.file.status !== 'uploading') {
        const imgBase = new FileReader();  //本地预览
        imgBase.readAsDataURL(info.file.originFileObj)

        setTimeout(async () => {
          const type = "1"
          const appKey = "237af33554b809a3"
          const from = "zh-CHS"
          const to = "en"
          const q = imgBase.result
          const salt = uuidFormat()
          const key = "I2jgBPowOemOyVbXGiFoO42OCR6Mflup"

          const res = await request({
            url: "/ocrtransapi",
            method: "post",
            data: {
              type,
              from,
              to,
              appKey,
              salt,
              sign: MD5(`${appKey}${q}${salt}${key}`).toLocaleUpperCase(),
              q,
            }
          })

          console.log(res);
        }, 1000);
      }
    },
  };

  function handleChange({ target }) {
    setVal(target.value)
  }

  function onKeyDownEnter({ keyCode }) {
    if (keyCode === 13) {
      message.warning('正在加载');
      chatQingyun(val).then(res => {
        const { data = {} } = res
        const temp = {}
        temp[val] = data.content
        message.success('加载成功');
        setChatVal([temp,...chatVal])
      })
    }
  }

  // function chatInfoFn() {
  //   const chatInfos = []
  //   for (const key in chatVal) {
  //     if (Object.hasOwnProperty.call(chatVal, key)) {
  //       const element = chatVal[key];
  //       chatInfos.push(
  //         <div key={key + Date.now()}>
  //           <p style={{ color: "#f40" }}>{key}</p>
  //           <p>{element}</p>
  //         </div>
  //       )
  //     }
  //   }
  //   return chatInfos
  // }

  return (
    <div>
      <Card
        title="图片翻译"
        extra={
          <Upload {...pro} >
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>
        }
        style={{
          width: 300,
        }}
      >
        <p>图片翻译展示区</p>
        <p>图片翻译展示区</p>
        <p>图片翻译展示区</p>
      </Card>

      <Card
        title="输入聊天"
        extra={
          <Input onChange={handleChange} onKeyDown={onKeyDownEnter} />
        }
        style={{
          width: 300,
        }}
      >

        {chatVal.map((item,i) => {
          const itemKey = Object.keys(item)[0]
          const itemValue = Object.values(item)[0]
          return (
            <div key={i}>
              <p style={{color:"#f40"}}>{itemKey}</p>
              <p>{itemValue}</p>
            </div>
          )
        })}
      </Card>
    </div>
  )
}
